<template>
    <TemplateTitle titleName="各厂吨水处理成本"></TemplateTitle>
    <div class="chart">
        <div class="standed">
            <p></p>
            <p></p><span>行业内上市企业平均处理成本</span>
        </div>
        <chart-cost :chartData="chartDataList" xAxisName="depName" :option="option" :chartType="chartType" :twoYAxis="false"
            :unit="unit" :orient="'horizontal'"></chart-cost>
        <div class="legend">
            <div class="legendItem"><span class="legendIcon one"></span><span class="legendText">处理成本</span></div>
            <div class="legendItem"><span class="legendIcon two"></span><span class="legendText">生产成本</span></div>
            <div class="legendItem"><span class="legendIcon three"></span><span class="legendText">人工</span></div>
            <div class="legendItem"><span class="legendIcon four"></span><span class="legendText">折旧</span></div>
        </div>
    </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue"

import homeHttp from "@/https/home.js"
import { onMounted, ref } from "vue"
import ChartCost from "./charts/ChartCost.vue"

const chartDataList = ref([])
const option = ref({})
const chartType = ref([
    // {
    //     type: "bar",
    //     code: "totalCost",
    //     name: "处理成本",
    //     linerColor: ["#3da8ea", "#24c7d8"],
    // },
    {
        type: "bar",
        code: "fourProductionCost",
        name: "处理成本",
        linerColor: ["#48ca54", "#5dda8a"],
    },
    {
        type: "bar",
        code: "laborCost",
        name: "处理成本",
        linerColor: ["#2ecaff", "#0afbf4"],
    },
    {
        type: "bar",
        code: "depreciationCost",
        name: "处理成本",
        linerColor: ["#fb980a", "#ffe22e"],
    },
    {
        type: "bar",
        code: "fourProductionCost",
        name: "生产成本",
        linerColor: ["#48ca54", "#5dda8a"],
    },
    {
        type: "bar",
        code: "laborCost",
        name: "人工",
        linerColor: ["#2ecaff", "#0afbf4"],
    },
    {
        type: "bar",
        code: "depreciationCost",
        name: "折旧",
        linerColor: ["#fb980a", "#ffe22e"],
    },
])
const unit = ref(['元/吨水'])

onMounted(() => {
    queryTotalTonWaterCost()
})

const queryTotalTonWaterCost = () => {
    homeHttp.queryTotalTonWaterCost().then(res => {
        if (res.data.code == 200) {
            res.data.data.forEach((item) => {
                if (item.depId == 1) {
                    item.depName = '总公司'
                    chartDataList.value[0] = item
                }
                if (item.depId == 2) {
                    item.depName = '星沙厂'
                    chartDataList.value[1] = item
                }
                if (item.depId == 4) {
                    item.depName = '城北厂'
                    chartDataList.value[2] = item
                }
                if (item.depId == 5) {
                    item.depName = '城南厂'
                    chartDataList.value[3] = item
                }
                if (item.depId == 3) {
                    item.depName = '城西厂'
                    chartDataList.value[4] = item
                }
            })
            // chartDataList.value = res.data.data
        }
    })
}
</script>

<style scoped lang="less">
.chart {
    position: relative;

    .standed {
        position: absolute;
        top: 0;
        right: 0;
        color: #ee114f;
        font-size: 10rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 100;

        p {
            width: 10rem;
            height: 2rem;
            background: #ee114f;
            margin-right: 2rem;
        }
    }
}

.legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 8rem;
    width: 100%;

    .legendItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 4rem;

        .legendIcon {
            display: inline-block;
            width: 16rem;
            height: 12rem;
            border-radius: 4rem;
            margin-right: 4rem;



            &.one {
                background: linear-gradient(to right, #48ca54, #2ecaff, #fb980a);
                ;
            }

            &.two {
                background: #48ca54;
            }

            &.three {
                background: #2ecaff;
            }

            &.four {
                background: #fb980a;
            }
        }

        .legendText {
            font-size: 12rem;
            color: #7da0ca,
        }
    }
}
</style>
